<template>
  <form class="user-log-card-wrapper" @submit.prevent="login">
		<i class="iconfont icon-cancel" @click="$emit('exit')"></i>
    <h2>登录</h2>
    <ul class="input-info-list">
      <li>
        <base-input 
				class="username-input"
				placeholder="请输入您的用户名"
				@change="renewUsername($event)"/>
        <i class="iconfont icon-warning signal"
				v-show="ifError"></i>
      </li>
			<li>
				<password-input class="pwd-input"
				@change="renewPwd"></password-input>
        <i class="iconfont icon-warning signal"
				v-show="ifError"></i>
        <p class="sig-message" v-show="ifError">您输入的账户名或密码有误</p>
			</li>
    </ul>
    <button class="login-button">Login</button>
    <p class="register-entry">
			还没有账号？
      <span @click="$emit('toReg')">点我注册</span>
			/
      <span @click="$emit('toFindpwd')">找回密码</span>
    </p>
  </form>
</template>

<script>
import BaseInput from '../utils/Input/BaseInput.vue';
import PasswordInput from '../utils/Input/PasswordInput.vue';

export default {
	components: {
		PasswordInput,
		BaseInput
	},
	data() {
		return {
			inputs: {
				account: '',
				userpwd: ''
			},	
			infos: [
        {
          key: 'account',
          placeholder: '请输入您的用户名或邮箱'
        },
        {
          key: 'userpwd',
          placeholder: '请输入密码'
        },
      ],
			ifError: false,
		}
	},
	methods: {
		renewUsername(event) {
			this.inputs.account = event.target.value;
		},
		renewPwd(event) {
			this.inputs.userpwd = event.target.value;
		},
		login() {
			this.$store.commit('login', {
				infos: JSON.parse(JSON.stringify(this.inputs)),
				callback: (success) => {
					if(success) this.$emit('exit');
					else this.ifError = true;
				}
			});
		}
	}
}
</script>

<style scoped lang="less">
@w: var(--userLoginCardWidth);
@fs: calc(var(--userLoginCardWidth) * 0.05);
@ifs: calc(@fs * 0.8);
@iw: calc(@w * 0.7);

.user-log-card-wrapper {
	box-sizing: border-box;
	width: @w;
	padding: calc(@w * 0.1) calc((@w - @iw) / 2);
	background-color: white;
	border-radius: calc(@w * 0.02);
	text-align: center;

	.icon-cancel {
		--a: calc(@w * 0.1);
		position: absolute;
		top: 0;
		right: 0;
		display: block;
		width: var(--a);
		height: var(--a);
		line-height: var(--a);
		text-align: center;
		font-size: @fs;
		font-weight: bold;
		color: var(--black);
		transition: .5s;

		&:hover {
			cursor: pointer;
			transform: rotate(180deg);
		}
	}

	h2 {
		font-size: calc(@fs * 1.5);
		color: var(--blue);
		line-height: 2;
		margin: @fs;
	}

	.input-info-list {
		width: @iw;

		li {
			position: relative;
			margin-bottom: calc(@w * 0.07);
			width: @iw;
			height: calc(@fs * 2);

			.username-input {
				--baseInputWidth: @iw;
				--baseInputHeight: calc(@fs * 2);
				--baseInputFontsize: @ifs;
			}

			.pwd-input {
				--passwordInputWidth: @iw;
				--passwordInputHeight: calc(@fs * 2);
				--passwordInputFontsize: @ifs;
			}

			.signal {
				position: absolute;
				left: 105%;
				top: 0;
				text-align: center;
				font-size: calc(@fs * 1.3);
				color: var(--red);
			}

			.sig-message {
				margin-top: calc(@fs * 0.4);
				line-height: @fs;
				margin-bottom: calc(-0.7 * @fs);
				text-align: left;
				padding-left: calc(@fs);
				font-size: calc(@fs * 0.4);
				color: var(--red);
			}

			.show-pwd-btn {
				position: absolute;
				top: 50%;
				transform: translateY(-50%);
				right: calc(@fs * 0.3);
				font-size: @fs;
				color: var(--dark);

				&:hover {
					cursor: pointer;
					color: var(--blue);
				}
			}
		}
	}

	.login-button {
		width: 100%;
		line-height: 2;
		font-size: calc(@fs * 1.2);
    color: white;
    font-weight: bold;
		border-radius: 1.5vw;
		background-image: linear-gradient(-200deg, #fac0e7, #91baff);
	}

	.register-entry,
	.find-password {
		margin: calc(@fs * 0.5) 0;
		font-size: calc(@fs * 0.5);

		span {
			color: var(--blue);

			&:hover {
				cursor: pointer;
			}
		}
	}
}
</style>